{% extends "index.html" %}
{% block title %}达芬奇小游戏（尚未完成）{% endblock %}
{% block script %}
    <script>
        $(document).ready(function () {
            {#初始化牌库，维度先是数字0-11，再是黑白0-白|1-黑#}
            var num_Array = []
            for(var k=0;k<12;k++){
                num_Array[k] = [];
                for(var j=0;j<2;j++){
                    num_Array[k][j]=1
                }
            }
            {#为ai方发牌#}
            var AI_row=document.getElementById('AI_row')
            for(var m=0;m<{{ num }};m++){
                var index = initget(num_Array)
                num_Array[index[0]][index[1]] = 0
                var div = document.createElement('div')
                div.innerText = index[0]
                if(index[1] === 0){
                    div.className='white'
                }else {
                    div.className='black'
                }
                {#为元素添加class，必须要有空格，不然class不能正确识别#}
                div.className += ' col-md-1'
                AI_row.append(div)
            }
            {#为玩家方发牌#}
            var PL_row=document.getElementById('PL_row')
            for(var m=0;m<{{ num }};m++){
                var index = initget(num_Array)
                num_Array[index[0]][index[1]] = 0
                var div = document.createElement('div')

                div.innerText = index[0]
                if(index[1] === 0){
                    div.className='white'
                }else {
                    div.className='black'
                }
                div.className += ' col-md-1'
                PL_row.append(div)
            }
            {#发牌完成之后，显示排序按钮#}
            var sort_but = document.getElementById('sort_but')
            sort_but.setAttribute('style','display: block')
        })
        function initget(num_Array) {
            var index_list = []
            for(var k=0;k<12;k++){
                for(var j=0;j<2;j++){
                    if(num_Array[k][j]===1){
                        index_list.push([k,j])
                    }
                }
            }
            rand_Get = Math.floor(Math.random()*index_list.length)
            return index_list[rand_Get]
        }
        function init_sort() {
            var AI_list = document.querySelector('#AI_row').childNodes
            console.log(AI_list)
            for(var j=0;j<AI_list.length;j++){
                var AI_card =  []
                AI_card[j] = AI_list[j].innerText
                console.log(AI_card[j])
            }
        }
    </script>
{% endblock %}
{% block style %}
    <style>
        .white{
            background-color: black;
            color: white;
            width: 100px;
            height: 100px;
            border-style: groove;
            text-align: center;
        }
        .black{
            background-color: white;
            color: black;
            width: 100px;
            height: 100px;
            border-style: groove;
            text-align: center;
        }
    </style>
{% endblock %}
{% block side %}
    <div class="container">
        <div>
            <h2>AI的手牌</h2>
        </div>
        <div class="row">
            <p id="AI_row"></p>
        </div>
        <div class="row">
            <h2>你的手牌</h2>
        </div>
        <div class="row">
            <p id="PL_row"></p>
        </div>
        <div class="row">
            <button id="sort_but" class="btn btn-default" style="display: none" onclick="init_sort()">排序</button>
        </div>
    </div>
{% endblock %}